import { useState, useContext, useEffect } from 'react';
import { FileTextFilled } from '@ant-design/icons'
import style from './index.module.less'
import { CaseSchema } from '@components/schema/caseSchema';
import {CaseContext} from '../../../context'
import TypeTags from './components/typeTags'
import LeftInfo from './components/leftInfo'
import ProgressBar from './components/progressBar'
import Person from './components/person'
import Claim from './components/claim'

function Main () {
  const d = useContext(CaseContext)
  const [data, setData] = useState<CaseSchema | {[k: string]: any}>(d.caseDetail ? d.caseDetail : {})
  useEffect(() => {
    if (d.caseDetail) {
      setData(d.caseDetail)
    }
  }, [d])
  return (
    <div className={style.container}>
      <div className={style.header}>
        <div className={style['header-left']}>
          <div className={style['header-icon']}>
            <FileTextFilled size={14} />
          </div>
          <span className={style['header-title']}>{data.caseno_desc}</span>
          <TypeTags data={data as CaseSchema} />
        </div>
        <div className={style['header-right']}>
          {/* <a className={style['header-edit']}></a> */}
        </div>
      </div>
      <div className={style.body}>
        <div className={style['body-left']}>
          <LeftInfo data={data} />
        </div>
        <div className={style.split}></div>
        <div className={style['body-right']}>
          <ProgressBar caseDetail={data as CaseSchema} />
          <Person data={data} />
          {/* <Claim title='仲裁请求' /> */}
        </div>
      </div>
    </div>
  )
}

export default Main
